<template>
  <div id="container">
    <video
      class="video"
      src="../../assets/video/video62f4cc0d2d9f4.mp4"
      muted="muted"
      autoplay="true"
      loop="loop"
    ></video>
    
    <!-- 常规登入 -->
    <!-- <el-form
      :model="loginForm"
      status-icon
      :rules="rules"
      ref="loginForm"
      label-width="80px"
      class="login-loginForm"
    >
      <h1 class="title">后台管理系统</h1> -->

      <!-- 一开始是二维码角标，点击之后变成电脑角标，再次点击又切换 -->
      <!-- <i :class="['jiaobiao', 'iconfont']"></i> -->
      <!-- 切换二维码登入的控制条件isErweiLogin  -->
     <div id="froms">
      <!-- 常规登入 -->
      <!-- <common-login @syncLoginForm = "handlerSyncLoginForm"/> -->
      <CommonLogin :common="common" @switchs="sms=true,common=false" @wechats="wechat=true,common=false"/>

      <!-- 二维码登入 -->
      <!-- <qr-login/> -->
      <WechatLogin :wechat="wechat" @commons="common=true,wechat=false"/>

      <!--短信验证码登入-->
      <!-- <sms-login/> -->
      <SmsLogin :sms="sms" @names="common=true,sms=false"/>

      </div>
    <!-- </el-form> -->
  </div>
</template>
<script>
    import CommonLogin from "./commonLogin.vue"
    import SmsLogin from "./smsLogin.vue"
    import WechatLogin from "./wechatLogin.vue"
    export default {
        name:"login",
        components: {
            CommonLogin,
            SmsLogin,
            WechatLogin
        },
        data(){
            return{
                //定义三个属性
                common:true,
                sms:false,
                wechat:false
            }
        }
    }
</script>
 

<style lang="less" scoped>
/* //修改element样式
// 1.打开调试器 */
#container{
    display: flex;
}

#froms{
    background-color: rgba(203, 208, 225, 0.5);
    width: 400px;
    padding: 100px 0 50px 0;

    position: fixed;
    right: 10%;
    top: 20%;
    border-radius: 5px;
    
}

#video{
    position: fixed;
    left: 0;
    top: -80px;
    right: 0;
    bottom: 0;
    z-index:-1;  
}



</style>